<template>
	<view class="body">
		<view class="content" v-if="isUpdete">
			<uni-file-picker v-model="imageValue" file-mediatype="image" mode="grid" file-extname="png,jpg" :limit="1"
				@progress="progress" @success="success" @fail="fail" @select="select" />
			<div class="text">
				点击上传微信付款码
			</div>
		</view>
		<image class="img" v-else :src="images" mode="widthFix"></image>
		<div v-if="show" class="tips">请先保存付款码至手机相册中</div>
		<div v-if="!isUpdete" class="tips2" @click="(isUpdete = true)">重新上传</div>
		<div class="btn" v-if="isUpdete" @click="add">确认添加</div>
	</view>
</template>

<script>
import Api from "../../API/api";
	export default {
		data() {
			return {
				imageValue: [],
        images: null,
				show: true,
        isUpdete:true
			}
		},
		onLoad() {
      Api.getwxuser().then(res=>{
        this.images = res.data.qrPay
        this.show = false
        if (res.data.qrPay != null) {
          this.isUpdete = false
        }
      })
		},
		methods: {
      //提交
      add(){
        this.urlToBase64(this.images)
            .then(base64Data => {
              console.log(base64Data);
              Api.putBase64({base64:base64Data}).then(res=>{
                console.log(res)
                uni.showToast({
                  title: '上传成功',
                  icon: 'checkmarkempty'
                })
                this.isUpdete = false;
                // uni.navigateBack({
                //
                // })
              })
              // 在此处可以对base64Data进行处理或发送到服务器
            })
            .catch(error => {
              console.error('转换出错：', error);
            });
      },
      //转换为二进制
      urlToBase64(url) {
        return fetch(url)
            .then(response => response.blob())
            .then(blob => {
              return new Promise((resolve, reject) => {
                const reader = new FileReader();
                reader.onloadend = () => resolve(reader.result);
                reader.onerror = reject;
                reader.readAsDataURL(blob);
              });
            });
      },
			// 获取上传状态
			select(e) {
				console.log('选择文件：', e)
        this.images = e.tempFilePaths[0]
				this.show = false
        this.isUpdete = true;
			},
			// 获取上传进度
			progress(e) {
				console.log('上传进度：', e)
			},

			// 上传成功
			success(e) {
				console.log('上传成功')
			},

			// 上传失败
			fail(e) {
				console.log('上传失败：', e)
			}
		}
	}
</script>

<style lang="less" scoped>
	.body {
		padding-top: 30rpx;
	}

	.content {
		width: 80%;
		height: 60vh;
		background: #FFFFFF;
		border-radius: 10rpx;
		margin: 30rpx auto;
		padding: 30rpx;
		box-sizing: border-box;
		background: #FFFFFF;
		align-items: center;

		/deep/ .file-picker__box {
			margin-top: 250rpx;
			transform: translateX(-50%);
			position: relative;
			left: 50%;
		}

		.text {
			text-align: center;
			color: #aaa;
			font-size: 24rpx;
			font-weight: 600;
			margin-top: 20rpx;
		}
	}

	.img {
		margin: auto;
		display: flex;
		justify-content: center;
		width: 60%;

		image {
			width: 100%;
		}
	}

	.tips {
		text-align: center;
		color: #aaa;
		font-size: 24rpx;
	}

	.tips2 {
		margin-top: 30rpx;
		text-align: center;
		color: #aaa;
		font-size: 24rpx;
	}

	.btn {
		width: 520rpx;
		height: 96rpx;
		background: linear-gradient(180deg, #FFBD57 0%, #FD9509 100%);
		border-radius: 48rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		position: fixed;
		bottom: 50rpx;
		left: 50%;
		transform: translateX(-50%);
		color: #FFFFFF;
	}
</style>